<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>享送小哥</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body>
    <div id="data-loading">
        <div class="loading1"><img src="../images/loading.gif"></div>
    </div>
    <div class="vue">
        <div class="order-t">订单编号：{{order.order_sn}}</div>
        <div class="aui-content">
            <ul class="order-flow" v-if="order.status>-1">
                <!-- 状态0 START -->
                <li class="flow-process" v-if="order.status==0">
                    <div class="flow-icno"><img src="../images/icon1.png"></div>
                    <div class="flow-txt">
                        <div class="flow-t">{{order.time_axis[0].desc}}</div>
                        <div class="flow-c">{{order.time_axis[0].time}}</div>
                    </div>
                </li>
                <li class="flow-over" v-else>
                    <div class="flow-icno"><img src="../images/icon1.png"></div>
                    <div class="flow-txt">
                        <div class="flow-t">{{order.time_axis[0].desc}}</div>
                        <div class="flow-c">{{order.time_axis[0].time}}</div>
                    </div>
                </li>
                <!-- 状态0 END -->

                <!-- 状态1 START -->
                <li v-if="order.status<1">
                    <div class="flow-icno"><img src="../images/icon2.png"></div>
                    <div class="flow-text">{{order.time_axis[1].desc}}</div>
                </li>
                <li class="flow-process" v-else-if="order.status==1">
                    <div class="flow-icno"><img src="../images/icon2.png"></div>
                    <div class="flow-txt">
                        <div class="flow-t">{{order.time_axis[1].desc}}</div>
                        <div class="flow-c">{{order.time_axis[1].time}}</div>
                    </div>
                </li>
                <li class="flow-over" v-else>
                    <div class="flow-icno"><img src="../images/icon2.png"></div>
                    <div class="flow-txt">
                        <div class="flow-t">{{order.time_axis[1].desc}}</div>
                        <div class="flow-c">{{order.time_axis[1].time}}</div>
                        <div class="flow-c1">
                            <p>快递员： {{order.driver.name}}</p>
                            <p>电话：{{order.driver.phone}}</p>
                            <a href="javascript:;" @click="call(order.driver.phone)"></a>
                        </div>
                    </div>
                </li>
                <!-- 状态1 END -->

                <!-- 状态2 START -->
                <li v-if="order.status<2">
                    <div class="flow-icno"><img src="../images/icon3.png"></div>
                    <div class="flow-text">{{order.time_axis[2].desc}}</div>
                </li>
                <li class="flow-process" v-else-if="order.status==2">
                    <div class="flow-icno"><img src="../images/icon3.png"></div>
                    <div class="flow-txt">
                        <div class="flow-t">{{order.time_axis[2].desc}}</div>
                        <div class="flow-c">{{order.time_axis[2].time}}</div>
                    </div>
                </li>
                <li class="flow-over" v-else>
                    <div class="flow-icno"><img src="../images/icon3.png"></div>
                    <div class="flow-txt">
                        <div class="flow-t">{{order.time_axis[2].desc}}</div>
                        <div class="flow-c">{{order.time_axis[2].time}}</div>
                    </div>
                </li>
                <!-- 状态2 END -->

                <!-- 状态3 START -->
                <li v-if="order.status<3">
                    <div class="flow-icno"><img src="../images/icon4.png"></div>
                    <div class="flow-text">{{order.time_axis[3].desc}}</div>
                </li>
                <li class="flow-process" v-else-if="order.status==3">
                    <div class="flow-icno"><img src="../images/icon4.png"></div>
                    <div class="flow-txt">
                        <div class="flow-t">{{order.time_axis[3].desc}}</div>
                        <div class="flow-c">{{order.time_axis[3].time}}</div>
                    </div>
                </li>
                <li class="flow-over" v-else>
                    <div class="flow-icno"><img src="../images/icon4.png"></div>
                    <div class="flow-txt">
                        <div class="flow-t">{{order.time_axis[3].desc}}</div>
                        <div class="flow-c">{{order.time_axis[3].time}}</div>
                    </div>
                </li>
                <!-- 状态3 END -->

                <!-- 状态4 START -->
                <li v-if="order.status<4">
                    <div class="flow-icno"><img src="../images/icon2.png"></div>
                    <div class="flow-text">{{order.time_axis[4].desc}}</div>
                </li>
                <li class="flow-process" v-else>
                    <div class="flow-icno"><img src="../images/icon2.png"></div>
                    <div class="flow-txt" style="height:auto;overflow:hidden;">
                        <div class="flow-t">{{order.time_axis[4].desc}}</div>
                        <div class="flow-c">{{order.time_axis[4].time}}</div>
                        <div class="flow-c" style="margin-bottom:10px;">
                            <div v-if="!order.evaluate" class="aui-btn aui-btn-info aui-btn-sm" @click="evaluateCityOrder">评分</div>
                        </div>
                    </div>
                </li>
                <!-- 状态4 END -->

            </ul>
            <ul class="order-flow" v-else>
                <li class="flow-process">
                    <div class="flow-icno"><img src="../images/icon2.png"></div>
                    <div class="flow-txt flow-close">
                        订单已取消
                    </div>
                </li>
            </ul>
        </div>

        <div id="loading" @click="closePayList"></div>
        <!--支付方式-->
        <div class="pay-type" id="pay-type">
            <div class="pay-t2">请选择支付方式</div>
            <div class="pay-radio">
                <!-- <label>
              <img src="../images/wx.png"> 余额支付
              <input class="aui-radio" type="radio" name="pay_method" value="余额" checked="" v-model="form.pay_method">
            </label> -->
                <label>
              <img src="../images/wx.png"> 微信
              <input class="aui-radio" type="radio" name="pay_method" value="微信" v-model="form.pay_method">
            </label>
                <label>
              <img src="../images/zfb.png">支付宝
              <input class="aui-radio" type="radio" name="pay_method" value="支付宝" v-model="form.pay_method">
            </label>
            </div>
            <input class="aui-btn aui-btn-info aui-btn-block pay-btn2" type="submit" value="确认支付" @click="submitPay">
            <a href="javascript:void(0);" class="aui-iconfont aui-icon-close" id="pay-close2" @click="closePayList"></a>
        </div>

        <div class="pay-b" v-if="order.status==0">
            <div class="pay-text2" style="margin-left:0.5rem">￥{{order.pay_amount}}</div>
            <a href="javascript:;" class="aui-btn aui-btn-info pay-btn" @click="pay">支付</a>
        </div>
    </div>
    <script type="text/javascript" src="../script/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <script type="text/javascript">
        apiready = function() {

            api.setRefreshHeaderInfo({
                loadingImg: 'widget://image/refresh.png',
                bgColor: '#eee',
                textColor: '#333',
                textDown: '下拉刷新...',
                textUp: '松开刷新...'
            }, function(ret, err) {
                api.execScript({
                    script: 'reloadGetOrder()'
                });
            });

            api.execScript({
                script: 'reloadGetOrder()'
            });

            vObj = new Vue({
                el: ".vue",
                data: {
                    form: {
                        order_id: 0,
                        pay_method: '微信',
                        bonus_fee: 0,
                        coupon_id: 0,
                        remark: ''
                    },
                    order: {}
                },
                methods: {
                    call: function(tel) {
                        api.call({
                            type: 'tel',
                            number: tel
                        });
                    },
                    pay: function() {
                        $("#pay-type").addClass("active");
                        $("#loading").addClass("active");
                    },
                    closePayList: function() {
                        $("#pay-type").removeClass("active");
                        $("#loading").removeClass("active");
                    },
                    submitPay: function() {
                        api.showProgress({
                            title: '正在发起支付...',
                            text: '请稍候...',
                            modal: false
                        });
                        this.form.order_id = this.order.id;
                        app.request.post('Client/payProvinceOrder', this.form, {}, function(res) {
                            if (res.code == 200) {
                                switch (vObj.form.pay_method) {
                                    case '余额':
                                        app.page({
                                            name: 'order_detail1',
                                            url: 'order_detail1.html',
                                            pageParam: {
                                                order: vObj.order
                                            }
                                        });
                                        api.closeWin();
                                        break;
                                    case '微信':
                                        app.wxpay(res.data.wxpay, vObj.order, 'province');
                                        break;
                                    case '支付宝':
                                        app.alipay(res.data.alipay, vObj.order, 'province');
                                        break;
                                }
                            } else {
                                app.error(res.message);
                            }
                            api.hideProgress();
                        });
                    },
                    evaluateCityOrder: function() { //评分
                        api.openFrame({
                            name: 'evaluate',
                            url: 'evaluate.html',
                            rect: {
                                x: 0,
                                y: api.pageParam.statusBarPos.h + api.pageParam.headerPos.h,
                                w: 'auto',
                                h: 'auto'
                            },
                            pageParam: {
                                order_id: this.order.id,
                                action: 'Client/evaluateProvinceOrder'
                            },
                            bgColor: '#fff',
                            animation: {
                                type: 'push',
                                subType: 'from_bottom'
                            }
                        });
                    }
                }
            });

            app.request.finish(vObj);

            init(api.pageParam.order);

            app.addEventListener('orderDetailRefreshHeaderInfo', function(ret, err) {
                init(ret.value);
                api.refreshHeaderLoadDone();
            });
        }

        function init(orderData) {
            function emptyStatus(desc) {
                return {
                    status: '',
                    desc: desc,
                    time: ''
                };
            }

            function initOrder(order) {
                order.time_axis[-1] = order.time_axis[-1] || emptyStatus('');
                order.time_axis[1] = order.time_axis[1] || emptyStatus('待接单');
                order.time_axis[2] = order.time_axis[2] || emptyStatus('待取货');
                order.time_axis[3] = order.time_axis[3] || emptyStatus('待配送');
                order.time_axis[4] = order.time_axis[4] || emptyStatus('待签收');
                order.driver = order.driver || {
                    name: '',
                    phone: ''
                };
                return order;
            }

            vObj.order = initOrder(orderData);

        }
    </script>
</body>

</html>
